<template>
  <a-card style="border: none" :body-style="{ padding: '0' }">
    <div  class="salesCard">
      <a-tabs >
        <a-tab-pane>
          <a-row>
            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
              <EchartsGauge :chartData="{ name: '温度', value: temperature ,min:-30,max:200}" detailParam='{value} ℃.'  height="20vh"></EchartsGauge>
            </a-col>
            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
              <EchartsGauge :chartData="{ name: '局放', value: pd ,min:0,max:100}" detailParam='{value} dB'  height="20vh"></EchartsGauge>
            </a-col>
            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
              <EchartsGauge :chartData="{ name: '电压', value: voltage ,min:0,max:5}" detailParam='{value} V' height="20vh"></EchartsGauge>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-card>
</template>
<script lang="ts">
import JTreeSelect from '/@/components/Form/src/jeecg/components/JTreeSelect.vue';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import EchartsGauge from '../components/EchartsGauge.vue';
import {defineComponent, onMounted, PropType, ref, watch, watchEffect} from 'vue';
import Bar from '/@/components/chart/Bar.vue';
import RankList from '/@/components/chart/RankList.vue';
import Gauge from '/@/components/chart/Gauge.vue';
import { useUserStore } from '/@/store/modules/user';
import {propTypes} from "@/utils/propTypes";
export default defineComponent({
  name:'MonitorGrowCard',
  components:{
    EchartsGauge,
  },
  props:{
    temperature:propTypes.string,//温度
    pd:propTypes.string,//局放
    voltage:propTypes.string,//电压
  },

  setup(props){
    const cardTemperature = ref(props.temperature);
    const cardPd = ref(props.pd);
    const Voltage = ref(props.voltage);



    watchEffect(() => {
      // 监听父组件传递的值变化，更新子组件的值
      cardTemperature.value = props.temperature;
      cardPd.value = props.pd;
      Voltage.value = props.voltage;
    });
    function onon(){
      alert(121)
    }
    return {
      cardTemperature,
      cardPd,
      Voltage,
      onon,
    };
  }
});


</script>

<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}
</style>
